<template>
  <div :class="bottomCommentIsShow?'pdbottom1':'pdbottom2'">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多评论了,发一条吧"
      @load="onLoad"
      :immediate-check="false"
    >
    <!-- 评论列表 -->
    <commentItem :commentList="commentList" @replyShow="replyShow" :isshow="true"/>

    <!-- 底部添加评论区域 - 1 -->
    <div class="add-cmt-box van-hairline--top" v-if="bottomCommentIsShow">
      <van-icon name="arrow-left" size="0.48rem" @click="$router.back()" />
      <div class="ipt-cmt-div" @click="bottomShowFn">发表评论</div>
      <div class="icon-box">
        <van-badge :content="total_count > 0 ?total_count : ''" max="99" >
          <van-icon name="comment-o" size="0.53333334rem" @click="commentBottomFn"/>
        </van-badge>
        <van-icon name="star-o" color="red" size="0.53333334rem" v-if="articleObj.is_collected == true" @click="startArticleFn(true)"/>
         <van-icon name="star-o" size="0.53333334rem" v-else @click="startArticleFn(false)"/>
        <van-icon name="share-o" size="0.53333334rem" />
      </div>
    </div>

    <!-- 底部添加评论区域 - 2 -->
    <div class="cmt-box van-hairline--top" v-else v-focus>
      <textarea v-model="comText" placeholder="友善评论、理性发言、阳光心灵" @blur="bottomCommentIsShowFn"></textarea>
      <van-button type="default" :disabled="comText.length == 0" @click="addComment">发布</van-button>
    </div>
     </van-list>
     <!-- 回复弹出层 -->
     <van-popup v-model="replyshow" position="bottom" :style="{ height: '80%' }" @close="replyClose">
       <!-- 这里使用 v-if 的目的是让组件随着弹出层的显示进行渲染和销毁,
       防止加载过的组件不重新渲染导致数据,不会重新加载的问题,
       避免第一次加载该组件过后,组件内的commentlist数据永远是第一次加载文章评论内的评论的数据 -->
       <comment-reply v-if="replyshow" @iconClosepopup="iconClosepopup" :commentObj="commentObj" :replycommentCount="replycommentCount"/>
     </van-popup>
  </div>
</template>

<script>
  import {
    getCommentApi,
    addCommetApi,
    startArticleApi,
    unStartArticleApi
  } from '../../api/index.js'
  import commentReply from '@/views/articleDetail/commentReply.vue'
  import commentItem from './commentItem.vue'
  export default {
    name: 'comment',
    props: ['articleObj','type','source'],
    components: {
      commentReply,
      commentItem
    },
    data() {
      return {
        commentObj: [],
        replycommentCount: 0,
        replyshow: false,
        commentList: [], // 评论列表的数据
        bottomCommentIsShow: true, // 评论区域底部控制变量
        total_count: 0, // 该文章下的评论数量
        comText: '', // 评论文本框的内容
        loading: false, // 加载更多评论的变量控制
        finished: false, // 上拉加载更多事件变量
        nextPageId: '', // 下一页分页的id
      }
    },
    created() {
      this.getCommentList()
    },
    mounted(){
      // 接收评论组件传递的自定义事件,接收评论对象
      this.$bus.$on('replyClick', comment => {
        console.log(comment,'comment对象')
        this.commentObj.push(comment)
        this.replycommentCount = comment.reply_count
        console.log(this.commentObj)
      })
    },
    methods: {
      // 获取文章评论信息的api
      async getCommentList(objs) {
        console.log(objs,'objs')
        let obj = {
          source: this.source, // 传递文章的id
          type: this.type
        }
        if(objs){
            obj.offset = objs
        }
        let {
          data: res
        } = await getCommentApi(obj)
        this.commentList = [...this.commentList,...res.data.results]
        this.total_count = res.data.total_count // 评论总数
        this.nextPageId = res.data.last_id // 保存下一页分页的id,以前是用时间戳
        if(res.data.last_id == null){
          this.finished = true
        }
        this.loading = false
        console.log(res)
      },

      // 让底部评论区域切换
      bottomShowFn(){
        this.bottomCommentIsShow = false
      },
      // 点击评论图标时跳转到评论区域
      commentBottomFn(){
        // 方法1 不平滑,嗖的一声就到了底部
        // let boxHeight = document.querySelector('.article-container').scrollHeight
        // window.scrollTo(0,boxHeight)

        // 方法 2懒人版写法
        document.querySelector('.like-box').scrollIntoView({
          behavior:'smooth'
        })
          // 方法 3 原生方法参考老师的文档(扩展文件夹里面)
      },
      // 评论框失焦事件
      bottomCommentIsShowFn(){
        setTimeout(()=>{
          this.bottomCommentIsShow = true
        },0)
      },
      // 点击评论框的发表按钮发表新评论的事件
      async addComment(){
        try{
          let {data:res} = await addCommetApi({
            article_id:this.$route.query.article_id,
            content:this.comText
          })
        console.log(res)
        // 这里只为请求到最新评论的徽标,但是后期因为频繁获取请求所以不用了
        // this.getCommentList()
        // 这里只能保证评论数据新增到后台和页面渲染出来,但是评论徽标不是最新的
        this.commentList.unshift(res.data.new_obj)
        this.total_count++
          this.$notify({ type: 'success', message: '评论成功' });
          this.comText = ''
          this.commentBottomFn() // 跳转回评论的顶部
        }catch(e){
          console.log(e)
        }
      },
      // 上拉加载更多事件
      onLoad(){
        if(this.commentList.length > 0){
          this.getCommentList(this.nextPageId)
        }
      },
      // 收藏文章
      async startArticleFn(type){
        this.$emit('updateStartStatus',!this.articleObj.is_collected)
        if(type){
           // 收藏 > 未收藏
           let res = await unStartArticleApi(this.$route.query.article_id,)
           this.$notify({type:'success',message:'取消收藏'})
           console.log(this.$route)
        }else{
           // 未收藏 > 收藏
            let res = await startArticleApi({
              article_id:this.$route.query.article_id,
            })
            this.$notify({type:'success',message:'收藏成功'})
        }
      },
      // 评论prop组件弹起
      replyShow(value){
        this.replyshow = value
      },
      // 评论回复弹出层关闭时触发的事件
      replyClose(){
        this.commentObj = []
      },
      // 点击关闭图标触发的事件
      iconClosepopup(value){
        this.replyshow = value
      }
    }
  }
</script>

<style scoped lang="less">
  .pdbottom1{
    padding-bottom: 50px;
  }
  .pdbottom2{
    padding-bottom: 70px;
  }
  /*美化 - 文章详情 - 底部的评论页面 */
     // 外层容器
     .art-cmt-container-1 {
       padding-bottom: 46px;
     }
     .art-cmt-container-2 {
       padding-bottom: 80px;
     }

     // 发布评论的盒子 - 1
     .add-cmt-box {
       position: fixed;
       bottom: 0;
       left: 0;
       width: 100%;
       box-sizing: border-box;
       background-color: white;
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 46px;
       line-height: 46px;
       padding-left: 10px;
       .ipt-cmt-div {
         flex: 1;
         border: 1px solid #efefef;
         border-radius: 15px;
         height: 30px;
         font-size: 12px;
         line-height: 30px;
         padding-left: 15px;
         margin-left: 10px;
         background-color: #f8f8f8;
       }
       .icon-box {
         width: 40%;
         display: flex;
         justify-content: space-evenly;
         line-height: 0;
       }
     }

     .child {
       width: 20px;
       height: 20px;
       background: #f2f3f5;
     }

     // 发布评论的盒子 - 2
     .cmt-box {
       position: fixed;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 80px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 12px;
       padding-left: 10px;
       box-sizing: border-box;
       background-color: white;
       textarea {
         flex: 1;
         height: 66%;
         border: 1px solid #efefef;
         background-color: #f8f8f8;
         resize: none;
         border-radius: 6px;
         padding: 5px;
       }
       .van-button {
         height: 100%;
         border: none;
       }
     }
</style>
